/*
 * @Description: 登记（新增条目）弹窗
 * @Author: Rfan
 * @Date: 2022-06-17 19:46:09
 * @LastEditTime: 2022-06-24 19:30:43
 */

import { useEffect, useState } from 'react';
import { Button, Col, Form, Modal, Row } from 'antd';
import { fetchArchiveDetail, IFetchArchiveDetailParams } from '@/api/archives/archives';
import { useLevelTableContext } from '@/components/LevelTable/contexts/LevelTableContext';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';
import type { IMetadata } from '@/interfaces/metadata';

interface EditArchiveItemProps extends ICommonDialog {
  data: any;
}

const DetailArchiveItem: FC<EditArchiveItemProps> = (props) => {
  const { visible, data, onClose } = props;
  const { baseInfo } = useLevelTableContext();

  // 条目详情
  const [entry, setEntry] = useState(null);
  // 展示的元数据列表
  const [metadataList, setMetadataList] = useState<IMetadata[]>([]);

  useEffect(() => {
    if (visible) {
      // 请求条目详情
      const params: IFetchArchiveDetailParams = {
        atCode: baseInfo.atCode,
        atType: baseInfo.atType,
        level: baseInfo.level,
        entryId: data.id,
        dbName: baseInfo.dbName
      };
      fetchArchiveDetail(params).then((res) => {
        const { data } = res;
        setEntry(data.entry);
        setMetadataList(data.metadataList);
      });
    }
  }, [visible]);

  const onCancel = (data: any) => {
    onClose(data);
  };

  return (
    <Modal
      destroyOnClose
      title="详情"
      visible={visible}
      width={1000}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          关闭
        </Button>
      ]}
    >
      <Form
        layout="horizontal"
        size="small"
        labelCol={{ span: 8, offset: 0 }}
        wrapperCol={{ span: 16, offset: 0 }}
        colon
        labelWrap
      >
        <Row>
          {metadataList.map((item) => (
            <Col span={8}>
              <Form.Item label={item.field_desc}>{entry[item.field_name]}</Form.Item>
            </Col>
          ))}
        </Row>
      </Form>
    </Modal>
  );
};

export default DetailArchiveItem;
